<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>设置</a>
    <a>
      <cite>菜单管理</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-header">
        <button class="layui-btn" onclick="xadmin.open('添加菜单','./edit.html','','', true)"><i
            class="layui-icon"></i>新增</button>
      </div>
      <div class="layui-card-body ">
        <table class="layui-table layui-form">
          <thead>
            <tr>
              <th style="min-width: 25px; width: 25px;">序号</th>
              <th>名称</th>
              <th>图标</th>
              <th>控制器</th>
              <th>操作</th>
          </thead>
          <tbody class="x-cate">
            {foreach $menu as $v}
            <tr cate-id={$v.id} fid={$v.pid}>
              <td style="min-width: 25px; width: 25px;">
                <input type="text" class="form-control j-sort" value="{$v.sort}" data-name="sort[{$v.id}]"
                  style="height: 25px;font-size: 12px; padding: 0 5px; width: 35px;">
              </td>
              <td>
                {if $v.pid === 0}
                <i class="layui-icon x-show" status='true'>&#xe623;</i>
                {else}
                &nbsp;&nbsp;&nbsp;&nbsp;
                ├
                {/if}
                {$v.name}
              </td>
              <td>{$v.icon}</td>
              <td>{$v.controller}</td>
              <td class="td-manage">
                <button class="layui-btn layui-btn layui-btn-xs"
                  onclick="xadmin.open('编辑菜单','edit.html?id='+'{$v.id}','','', true)">
                  <i class="layui-icon">&#xe642;</i>编辑</button>
                <button class="layui-btn-danger layui-btn layui-btn-xs" onclick="property_del(this,'{$v.id}')"
                  href="javascript:;"><i class="layui-icon">&#xe640;</i>删除</button>
              </td>
            </tr>
            {/foreach}
            {if count($menu)==0}
            <tr>
              <td colspan="5" class="text-center">还没添加项目</td>
            </tr>
            {/if}
          </tbody>
        </table>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="sort">改变排序</button>
      </div>
    </div>
  </div>
</div>
<script>
  var sort = {};
  layui.use(['layer', 'form'], function () {
    var layer = layui.layer;
    var form = layui.form;
    //监听提交
    form.on('submit(sort)', function () {
      //发异步，把数据提交给php
      main.ajaxPost(
        {
          url: "{:url('sort')}",
          data: sort,
        },
        function (data) {
          setTimeout(function () {
            // 可以对父窗口进行刷新 
            window.location.reload();
          }, 500);
        }
      )
      return false;
    });
  });

  $('.j-sort').change(function (data) {
    sort[$(this).attr('data-name')] = data.target.value;
  });

  /*菜单-删除*/
  function property_del(obj, id) {
    layer.confirm('确认要删除吗？', function () {
      main.ajaxPost(
        {
          url: "{:url('delete')}",
          data: { "id": id },
        },
        function (data) {
          $(obj).parents("tr").remove();
        }
      )
    });
  }

  // 分类展开收起的分类的逻辑
  // 
  $(function () {
    $("tbody.x-cate tr[fid!='0']").hide();
    // 栏目多级显示效果
    $('.x-show').click(function () {
      if ($(this).attr('status') == 'true') {
        $(this).html('&#xe625;');
        $(this).attr('status', 'false');
        cateId = $(this).parents('tr').attr('cate-id');
        $("tbody tr[fid=" + cateId + "]").show();
      } else {
        cateIds = [];
        $(this).html('&#xe623;');
        $(this).attr('status', 'true');
        cateId = $(this).parents('tr').attr('cate-id');
        getCateId(cateId);
        for (var i in cateIds) {
          $("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('&#xe623;').attr('status', 'true');
        }
      }
    })
  })

  var cateIds = [];
  function getCateId(cateId) {
    $("tbody tr[fid=" + cateId + "]").each(function (index, el) {
      id = $(el).attr('cate-id');
      cateIds.push(id);
      getCateId(id);
    });
  }

</script>